<template>
  <div>
    <!-- 精品推荐图片-->
    <div class="jing-img">
      <img
        src="https://m.welan.com/static/img/jingpingtuijian.b54b9846.png"
        alt=""
      />
    </div>

    <!-- 精品推荐列表 -->
    <div class="pin-nav">
      <ul>
        <li v-for="(l, i) in recommendList.bookList" :key="i">
          <router-link :to="{ name: 'bookDetail', params: { skuId: l.skuId }, query: { name: l.name } }">
              <div class="ig">
              <img class="li-img" :src="l.img" alt="" />
            </div>
            <div class="li-all">
                <p class="li-name"> {{ l.name }} </p>
                <div class="li-bo">
                    <p class="li-price"> ￥{{ (l.wl_price).toFixed(2) }} </p>
                    <!-- <p class="li-price"> ￥{{ l.wl_price }} </p> -->
                    <div class="li-cart" @click.stop.prevent="cartAction(l.skuId)">
                      <van-icon name="cart-o" />
                    </div>
                </div>
            </div>
          </router-link>
        </li>
      </ul>
    </div>

     <!-- 结尾 -->
    <div>
      <p class="end">没有更多了</p>
    </div>
  </div>
</template>

<script>
export default {
  // props: {
  //     recommendList: Object,
  // },
  data() {
    return{
      bookNumber: 1
    }
  },
  methods: {
    checkIsLogin(callback) {  // 加入购物车，先检查用户是否登录
          if(this.userInfo){
              callback()
          } else {
              this.$dialog.confirm({
                  title: '温馨提示',
                  message: '你还没有登录,请先登录吧!',
              }).then(() => {
                  // on close
                  this.$router.push({ name: 'login' })
              })
                  .catch( err => {
              })
          }
      },
    cartAction(skuId) {
          // 先查询是否登录
          this.checkIsLogin(() => {

              this.$ajax.getCartOne({
                  skuId: skuId,
                  phone: this.userInfo.phone
              })
              .then(res => {
                  if(res.length > 0) {
                      // 删除 
                      // id 不是skuId 带这条记录的id 
                      this.$ajax.updateBookNumber(res[0].id, {
                          bookNumber: res[0].bookNumber+1,
                      })
                      .then(data => {
                        console.log(skuId);
                          // this.getCartCount()
                          //  this.$toast('你取消了点赞') // 有问题
                          this.showSuccessMsg('加入购物车成功')
                      })
                  } else {
                
                      this.$ajax.getDetails({
                          skuId: skuId
                      }).then((res) => {
                          console.log(res);
                          // this.detailsBook = res
                          // console.log(res.imgs[0].imageUrl);
                          // this.bookImg = res.imgs[0].imageUrl
                          // this.bookPrice = res.sku.wlPrice
                           // 添加
                          this.$ajax.addCartOne({
                              skuId: skuId,
                              bookName: res.products.name,
                              bookImg: res.imgs[0].imageUrl,
                              bookPrice: res.sku.wlPrice,
                              bookNumber: this.bookNumber,
                              phone: this.userInfo.phone,
                              username: this.userInfo.username,
                          })
                          .then(result => {
                              // this.getCartCount()
                              console.log(skuId);
                              this.showSuccessMsg('加入购物车成功')
                              // this.$toast('点赞成功')
                          })
                      });

                      // // 添加
                      // this.$ajax.addCartOne({
                      //     skuId: skuId,
                      //     bookName: this.recommendList.bookList.name,
                      //     bookImg: this.recommendList.bookList.img,
                      //     bookPrice: this.recommendList.bookList.bookPrice,
                      //     bookNumber: this.bookNumber,
                      //     phone: this.userInfo.phone,
                      //     username: this.userInfo.username,
                      // })
                      // .then(result => {
                      //     // this.getCartCount()
                      //     console.log(skuId);
                      //     this.showSuccessMsg('加入购物车成功')
                      //     // this.$toast('点赞成功')
                      // })
                  }
              })
          })
      },
  },
   mounted() {
    this.getRecommendListAction({
      pageNum: this.pageNum
    })
  },
}
</script>


<style lang="scss">

.jing-img {
      margin-top: 10px;
      img {
        width: 100%;
        height: 100%;
      }
  }

  .pin-nav {
      ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          li {
              background-color: white;
              width: calc(50% - 2vw);
              .ig {
                width: 185px;
                height: 186px;
                .li-img {
                  width: 100%;
                  height: 100%;
                }
              }
              .li-all {
                  padding: 2vw;
                  .li-name {
                      height: 8vw;
                      margin-bottom: 3.2vw;
                      font-size: 14px;
                      line-height: 15px;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      color: black;
                  }
                  .li-bo {
                      display: flex;
                      justify-content: space-between;
                      .li-price {
                        color: #f2270c;
                        font-size: 13px;
                    }
                    .li-cart {
                      padding-right: 20px;
                      .van-icon-cart-o {
                          color: red;
                          font-size: 0.5rem;
                          border: 1px solid red;
                          padding: 0.533vw 0.533vw 0;
                          border-radius: 1.6vw;
                      }
                    }
                  }
              }
          }
      }
  }

  .end {
    color: #969799;
    font-size: 3.733vw;
    line-height: 13.333vw;
    text-align: center;
  }

</style>